<h3>Time line</h3>
<script>
//dateVar = new Date(2008, 1, 1, 12, 12, 12);
//dateVar =  new Date("October 12, 1988 13:14:00");
//dateVar =  new Date("October 19, 2008  9:11:00");

//alert(dateVar);
</script>


<!-- http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["annotatedtimeline"]});
  google.setOnLoadCallback(drawChart);
      
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'DateTime');
<?php foreach ($this->rooms as $room): ?>    
    data.addColumn('number', '<?= $room["name"]; ?>');
<?php endforeach ?>    
    data.addRows(<?= count($this->readings) ?>);
<?php $i=0; ?>
<?php foreach ($this->readings as $datetime=>$readings): ?>  
    data.setValue(<?= $i ?>, 0, new Date("<?= $datetime ?>"));
<?php foreach ($readings as $index=>$reading): ?>
      data.setValue(<?= $i ?>, <?= ($index+1) ?>, <?= $reading ?>);
<?php endforeach ?>
<?php $i++ ?>
<?php endforeach ?>
      var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
      chart.draw(data, {displayAnnotations: true});
    }

</script>
<div id="chart_div" style="width: 700px; height: 240px;">
  <div style="width:100%; text-align:center;"><img src="../gfx/wait30.gif" /></div>
</div>

<h3>Statistics</h3>
<?php foreach ($this->rooms as $room): ?>
<h4 style="margin-bottom:0;"><?= $room["name"]; ?></h4>
<dl class="stats">
  <dt>Average</dt>
  <dd><?= $room["average"] ?> &deg;<?= $this->scale ?>
   (Setpoint:  <a href="<?= $this->url(
          array('controller'=>'setpoint','action'=>'edit','room_id'=>$room['room_id']), 
          'default', 
          true) ?>" title="Change setpoint temperature">
          <?= $room["setpoint"] ?> &deg;<?= $this->scale ?>
          </a>)
  </dd>
  <dt>Std. Dev.</dt>
  <dd><?= $room["stddev"] ?></dd>
  <dt>Range</dt>
  <dd><?= $room["range"] ?> &deg;<?= $this->scale ?> (Min = <?= $room['min']?>, Max = <?= $room['max']?>)</dd>

</dl>
<?php endforeach ?>

<pre>
  <?php //print_r($this->rooms); ?>
    <?php //print_r($this->readings); ?>
</pre>